<template>
	<div class="business-message-container">
		<div class="right">
			<el-button type="primary" class="add-variable" @click="addBusinessVariable">新增变量</el-button>
		</div>
		<div class="table">
			<Table :tableData="businessData">
				<template v-slot:details>
					<el-table-column width="200px" align="center" label="脱敏配置">
						<template slot-scope="scope">
							<el-button type="text" @click="businessDetails(scope.row)">详情</el-button>
						</template>
					</el-table-column>
				</template>
				<template v-slot:btn>
					<el-table-column width="250px" align="center" label="操作">
						<template slot-scope="scope">
							<el-button size="mini" class="edit-btn" @click="deleteBusinessVariable(scope.row)" v-if="scope.row.isDefault !== true">删除</el-button>
							<el-button size="mini" class="edit-btn" @click="editBusinessVariable(scope.row)">修改</el-button>
						</template>
					</el-table-column>
				</template>
			</Table>
		</div>
		<div class="page">
			<PageSize :pages="businessData.pageData" @changePageSize="changeBusinessPageSize" @changeCurrentPage="changeBusinessCurrentPage" />
		</div>
	</div>
</template>

<script>
import Table from '../components/Table.vue';
import PageSize from '../components/PageSize.vue';
export default {
	name: '',
	components: {
		Table,
		PageSize
	},
	props: {
		businessData: {
			require: true,
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {};
	},
	mounted() {},
	methods: {
		addBusinessVariable() {
			this.$emit('addBusinessVariable');
		},
		businessDetails(row) {
			this.$emit('businessDetails', row);
		},
		deleteBusinessVariable(row) {
			this.$emit('deleteBusinessVariable', row);
		},
		editBusinessVariable(row) {
			this.$emit('editBusinessVariable', row);
		},
		changeBusinessPageSize(pageSize) {
			this.$emit('changeBusinessPageSize', pageSize);
		},
		changeBusinessCurrentPage(page) {
			this.$emit('changeBusinessCurrentPage', page);
		}
	}
};
</script>

<style lang="less" scoped>
.business-message-container {
	.right {
		position: absolute;
		top: 0;
		right: 20px;
		.add-variable {
			// width: 76px;
			// height: 28px;
			background: #ffffff;
			border: 1px solid #6384fe;
			border-radius: 4px;
			line-height: 6px;
			// padding-left: 7px;
			color: #6384fe;
		}
	}
	.edit-btn {
		background: #6384fe;
		color: #fff;
	}
}
</style>
<style lang="less">
.business-message-container .el-table thead {
	color: #676a6c;
	tr {
		th {
			background-color: #f8f8f9;
		}
	}
}
.business-message-container {
	.table {
		width: 80% !important;
		margin-top: 33px;
	}
	.page {
		margin-top: 30px;
	}
}
</style>
